<template>
  <view>
    <view class="list_container">
      <view class="list_item" v-for="(item,index) in news_list" :key="index" @click="gotoWebView(item.content)">
        <view class="left">
          <view class="title">
            {{item.title}}
          </view>
          <view class="bottom">
            <view class="time">
              {{item.create_time.slice(0,10)}}
            </view>
            <view class="writer">
              {{item.author.nickname.slice(0,20)}}
            </view>
          </view>
        </view>
        <image class="img" :src="item.news_pics_set">
        </image>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        method: 0,
        news_list: [{
            title: "“崇本拓新，向海图强”拔尖计划2.0全国线上书院",
            time: "2022.5.20",
            writer: "中国海洋大学新闻中心",
            link: "https://mp.weixin.qq.com/s/5-52wJCImOKPU86MBspHGg",
            src: "../../static/news/news_center.png",
          },
          {
            title: "“第十一届“感恩海大”研究生品牌活动",
            time: "2022.5.16",
            writer: "海大经济学院研究生",
            link: "https://mp.weixin.qq.com/s/f9LduwiYJfBELaHJfN7NLA",
            src: "../../static/news/ganenhaida.jpg",
          },
          {
            title: "“申昊杯”第四届中国研究生机器人创新设计大赛",
            time: "2022.5.16",
            writer: "中国海大研究生",
            link: "https://mp.weixin.qq.com/s/anMfLFEjBnfhPDRdS1phTw",
            src: "../../static/news/shenahobei.png",
          },
          {
            title: "未来海洋讲坛",
            time: "2022.5.17",
            writer: "中国海洋大学未来海洋学院",
            link: "http://www.ouc.edu.cn/2022/0517/c5739a370615/page.htm",
            src: "../../static/news/ocean.png",
          },
        ]

      };
    },
    methods: {
      gotoWebView(link) {
        uni.navigateTo({
          // 跳转到webview页面
          url: `/pages/webview/webview?url=${link}`,
        });
      },
      async getHotList() {
        const {
          data: res
        } = await uni.$http.get('/news/recommend/v4')
        if (res.code != 1000) return uni.$showMsg()
        this.news_list = res.data.news
      },
      async getSearchResult(kw) {
        const query = {
          key: kw,
        }
        const {
          data: res
        } = await uni.$http.get('/news/recommend/search', query)
        if (res.code != 1000) return uni.$showMsg()
        this.news_list = res.data.news;
      },
    },
    onLoad(options) {
      if (options.method == '1') {
        this.getHotList()
      } else {
        console.log(options.news_list);
        this.getSearchResult(options.news_list)
      }
    },
  }
</script>

<style lang="scss">
  .list_container {
    .list_item {
      margin-bottom: 10px;
      display: flex;
      padding-left: 36rpx;
      padding-right: 36rpx;
      height: 89px;
      justify-content: space-between;
      border-radius: 8px;

      .img {
        width: 102px;
        height: 57.1144px;
      }

      align-items: center;
      background-color: #fff;

      .left {
        width: 500rpx;
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: space-around;
        align-items: flex-start;

        .title {
          margin-top: 10px;
          font-size: 15px;
          width: 85%;
        }

        .bottom {
          width: 100%;
          display: flex;
          font-size: 13px;
          color: rgba(174, 174, 178, 100);

          .writer {
            margin-left: 10px;
          }
        }
      }
    }
  }
</style>
